<template>
  <div class="albumInfo">
    <div class="left">
      <img :src="albumList.picUrl" alt width="200" height="200" />
    </div>
    <div class="right">
      <div>{{ albumList.name }}</div>
      <div>全部播放</div>
      <div>
        歌手:
        <span>{{ albumList?.singer?.join("，") }}</span>
      </div>
      <div>时间:{{ albumList.publishTime }}</div>
      <div>简介:{{ albumList.description }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import axios from "@/http";
import { useRoute } from "vue-router";
onMounted(() => {
  getAlbumInfo();
});
const albumList = ref({});
const albumSongs = ref([]);
const route = useRoute();
const getAlbumInfo = () => {
  const { id } = route.params;
  axios
    .get("/album", {
      params: {
        id,
      },
    })
    .then((res) => {
      albumList.value = {
        ...res.data.album,
        singer: res.data.album.artists.map((item) => item.name),
      };
      albumSongs.value = res.data.songs;
    });
};
</script>

<style lang="scss">
.albumInfo {
  display: flex;
  padding: 0 32px;
  .left {
    img {
      border-radius: 5px;
    }
  }
  .right {
    color: #b2b2b2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 32px;
    div {
      &:nth-child(1) {
        font-size: 20px;
        font-weight: bolder;
      }
      &:nth-child(2) {
        color: #fff;
        width: 100px;
        height: 25px;
        font-size: 14px;
        font-weight: bold;
        line-height: 25px;
        background-color: #ce4d3f;
        border-radius: 25px;
        text-align: center;
      }
      &:nth-child(3) {
        font-size: 13px;
        font-weight: bold;
        span {
          color: #90b8e2;
        }
      }
      &:nth-child(4) {
        font-size: 13px;
        font-weight: bold;
      }
      &:nth-child(5) {
        height: 76px;
        font-size: 13px;
        overflow: hidden;
      }
    }
  }
}
</style>
